/**
 *
 * @author ciwyaitd
 * @date   16/1/14
 * @author levy 重构成 ES6 module
 * @date 16/6/15
 */
import Person from "./Person";
import DetailRow from "./ProgressDetail";
import MaskLayout from "./MaskLayout";
import SwiperComponent from "../Swiper";
import BlockBtn from "./BlockBtn";


{
    //避免常量影响到别的js文件
    const RC = React.createClass,
        r = React,
        lf = liefeng,
        ajax = lf.utils.ajax,
        log = lf.utils.log;

    /**
     * @desc [ 底部弹出处理步骤详情 ]
     * @args [ layerVisible, displayNone, layerConVisible, layerConRender, layerCon, belong ]
     */
    var DoneTaskDetailLayer = RC({
        getDefaultProps: function () {
            return {
                belong: '', // 更高级的标识
                layerCon: '' // 内容
            }
        },
        render: function () {
            var layerCon = this.props.layerConRender(this.props.layerCon);
            return (
                <section className={"bottom-form-component " + this.props.layerVisible} onTouchMove={this._touchMoveHandler} >
                    <MaskLayout displayNone={this.props.displayNone} layoutBelong="layer" importantBelong={this.props.belong} />
                    <div className={"bottom-form-layout " + this.props.layerConVisible}>
                        {layerCon}
                    </div>
                </section>
            )
        },

        _touchMoveHandler: function ( event ) {
            event.preventDefault();
            event.stopPropagation();
        }
    });

    /**
     * 每个步骤处理详情 单行
     */
    var LayerTextRow = RC({
        render: function () {
            var con_text = this.props.con || '无',
                text = '',
                field = this.props.field;

            con_text instanceof Object && con_text.map(function ( item, i ) {
                if ( i == 0 ) {
                    text += item['name'];
                    return ;
                }
                text += ',' + item['name'];
            });
            con_text = text || con_text;


            //人员名字处理
            if(field == 'assistAccepterName') {
                let persons = con_text.split(',');

                con_text = persons.map((person,i) => {
                    let nameArr = person.split('--'),
                        len = nameArr.length,
                        name = nameArr[len - 1];

                    name = name.length > 5 ? name.substr(0,4) + '...' : name;

                    if(i == 0)
                        return name;
                    else
                        return ',' + name;
                });

                con_text.join(',');
            }


            //回访逻辑
            else if(field == 'timeliness') {
                con_text = con_text ? '及时' : '不及时';
            }
            else if(field == 'level' || field == 'attitude') {
                con_text = con_text ? con_text > 1 ? '好' : '一般' : '差';
            }
            else if(field == 'revisitMode') {
                con_text = con_text == 1 ? '电话' : '上门';
            }

            return (
                <div className="layer-text-row">
                    <p className="layer-text-tit">{this.props.tit}：</p>
                    <aside className="break-word">{con_text}</aside>
                </div>
            )
        }
    });

    /**
     * 每个步骤处理详情 弹出层
     * @desc [  ]
     */
    var LayerTextCon = RC({
        getInitialState: function () {
            return {
                layerTextCon: []
            }
        },
        componentWillReceiveProps: function (nextProps) {
            var tit = nextProps.tableTitList,
                dt = nextProps.data;

            var layerTextCon = tit.map((item) => {
                if (item[0] == 'picUrls') {
                    //console.log(dt[item[0]])
                    return dt[item[0]] ?
                        <SwiperComponent imgList={dt[item[0]]}
                             enlargeHandler={this.props.enlargeHandler}/>
                        : '';
                }
                else if(item[0] == 'attachs') {
                    return dt[item[0]] ?
                        <SwiperComponent imgList={dt[item[0]].map(obj => obj.fileUrl)}
                            enlargeHandler={this.props.enlargeHandler}/> :
                        '';
                }

                return <LayerTextRow tit={item[1]} con={dt[item[0]]} field={item[0]}/>
            });

            this.setState({
                layerTextCon: layerTextCon
            });
        },
        render: function () {
            return (
                <div className="layer-text-con">
                    {this.state.layerTextCon}
                </div>
            )
        }
    });




    /**
     * @desc [ 工单处理详情进度组件 ]
     * @args [ dt ] 请求回来的进度
     * @args [ alertCon ] 要弹出的内容
     */
    var TaskProcessDetail = RC({
        getInitialState: function () {
            return {
                paddingBottom: '0.7rem'
            }
        },
        getDefaultProps: function () {
            return {
                status: ''
            }
        },
        componentDidMount: function () {
            this.props.status == 0 && this.setState({
                paddingBottom: '0.2rem'
            })
        },
        render: function () {
            var props = this.props,
                dt = props.data,
                rowItems = dt.eventProcessList.map(function (item,i){
                    return <DetailRow index={i} data={item} taskLayerRender={props.taskLayerRender} />
                });

            return (
                <div className="task-processing-detail" style={this.state}>
                    {rowItems}
                </div>
            )
        }
    });


    /**
     * 派工
     */
    var FormContentSend = RC({
        getInitialState: function () {
            return {
                selectStatus: ''
            }
        },
        componentWillMount: function () {
            var max_count = 10000,
                me = this;
            ajax({
                data: {
                    projectId: me.props.projectId,
                    staffId: me.props.staffId
                },
                success: function (data) {
                    var aLinks = data.dataList.map(function (data) {
                        return data.staffList.map( function ( item ) {
                            return <Person
                                maxCount={max_count}
                                item={item}
                                currentId={me.state.currentId}
                                selectStatus={me.state.selectStatus}
                                selectHandler={me._chooseItem} />
                        });
                    });

                    me.setState({
                        aLinks: aLinks
                    });

                }
            }, lf.api.task.dispatchList)
        },
        render: function () {

            return (
                <div className="J_bottom_form bottom-form-name">
                    {this.state.aLinks}
                    <textarea
                        className="bottom-form-explain"
                        placeholder="补充说明"
                        onBlur={this.blurHandler}
                        onFocus={this.focusHandler}></textarea>
                </div>
            )
        },

        _chooseItem: function ( currentId ) {
            this.setState({
                selectStatus: ''
            });
        },
        focusHandler: function () {
            this.props.setFocusFlagHandler();
            //$('body').removeClass('normal-body');
        },
        blurHandler: function () {
            //$('body').addClass('normal-body');
        }
    });

    /*----------------- 办理 -----------------*/


//levy 办理
    var FormContentDeal = RC({
        getInitialState: function () {
            return {
                blockBtn: []
            }
        },
        getDefaultProps: function () {
            return {
                blockBtn: [],
                upLoadHandler:'',
                imgList: []
            }
        },
        componentWillMount: function () {
            var props = this.props,
                blockBtns = props.blockBtns,
                blockBtn = blockBtns.map( function (item,i) {
                    return <BlockBtn key={'blockBtn-'+i} data={item}
                                                 ordercode={props.ordercode} currTask={props.currTask} />
                });

            this.setState({
                blockBtn: blockBtn
            });
        },
        componentDidMount: function () {
            r.findDOMNode(this.refs.upLoadBtn).addEventListener('tap', function (e) {
                this.props.upLoadHandler && this.props.upLoadHandler(e);
            }.bind(this), !1);
        },
        render: function () {
            var float_flag = !1;
            return (
                <div className="J_bottom_form">
                    <div className="bottom-form-handle">
                        <textarea className="form-text-area" placeholder="请填写领取的材料内容" name="" id="material" cols="30" rows="10" onFocus={this.focusHandler}></textarea>
                        <textarea className="form-text-area" placeholder="请填写处理结果" name="" id="dealResult" cols="30" rows="10" onFocus={this.focusHandler}></textarea>
                        <div className="bottom-form-handle-img">
                            <a className="up-load-img-btn" ref="upLoadBtn" href="javascript:">上传图片</a>
                            <SwiperComponent imgList={this.props.imgList}
                                             deleteFn={this.props.deleteFn}
                                             enlargeHandler={this.props.enlargeHandler}
                                             floatFlag={float_flag} />
                        </div>
                    </div>
                    {this.state.blockBtn}
                </div>
            );
            // 在textarea下, 用于选择处理结果
            //<article className="task-process-result radio-box">
            //<h2>处理结果</h2>
            //<aside >
            //<span><label>已完成 <input id="text" className="radio-check" type="radio" name="finishStatus"/><span className="radio-icon-checked"></span></label></span>
            //<span><label>未完成 <input id="test" className="radio-check" type="radio" name="finishStatus"/><span className="radio-icon-checked"></span></label></span>
            //</aside>
            //</article>
        },

        focusHandler: function () {
            this.props.setFocusFlagHandler();
        }
    });


    /*----------------- 审核 -----------------*/
    var FormContentReview = RC({
        getInitialState: function () {
            return {
                visible: '',
                placeHolder: '审核意见'
            }
        },
        render: function () {
            return (
                <div className="J_bottom_form">
                    <div className="bottom-form-handle">
                        <article className="task-process-result radio-box">
                            <h2>审核结果</h2>
                            <aside className="J_review_radio">
                                <span><label>通过 <input onChange={this._passHandler} className="radio-check" type="radio" data-flag="pass" defaultChecked name="reviewStatus"/><span className="radio-icon-checked"></span></label></span>
                                <span><label>驳回 <input onChange={this._failHandler} className="radio-check" type="radio" data-flag="fail" name="reviewStatus"/><span className="radio-icon-checked"></span></label></span>
                            </aside>
                        </article>
                        <textarea className="form-text-area" placeholder={'请填写'+this.state.placeHolder} id="review-content" cols="30" rows="10" onFocus={this.focusHandler}></textarea>
                    </div>
                    <BlockBtn data={this.props.blockBtns} visible={this.state.visible} currTask={this.props.currTask} />
                </div>
            );
        },

        focusHandler: function () {
            this.props.setFocusFlagHandler();
        },
        _passHandler: function ( ) {
            this.setState({
                placeHolder: '审核意见',
                visible: ''
            })
        },
        _failHandler: function ( ) {
            this.setState({
                placeHolder: '驳回意见',
                visible: ' ele-hide'
            })
        }

    });
}


export { TaskProcessDetail, LayerTextCon, FormContentDeal,
    FormContentSend, FormContentReview,DoneTaskDetailLayer
};


